import React, { Component } from 'react'
import { Animated } from 'react-native'

export default class RotateView extends Component {
  constructor(props){
    super(props)
    this.playTicker = null;
  }
  state = {
    rotate: 0
  }
  play() {
    this.playTicker && clearInterval(this.playTicker);
    this.playTicker = setInterval(() => {
      let rotate = this.state.rotate;
      rotate += 1;
      if(rotate > 360){
        rotate = 0
      }      
      this.setState({
        rotate
      })
    }, 36);
  }
  stop() {
    this.playTicker && clearInterval(this.playTicker);
  }
  render() {
    let { rotate } = this.state
    let rotateDeg = rotate + 'deg'
    if(this.props.playing){
      this.play()
    }
    else{
      this.stop()
    }
    return (
      <Animated.View style={{...this.props.style,transform: [{rotate: rotateDeg}]}}>
        {this.props.children}
      </Animated.View>
    )
  }
}